<script setup>
import { useUserStore } from '@/stores/user';
// eslint-disable-next-line no-unused-vars
import { Toast } from 'vant';
import api4j from '@/api/example';
import { EiBlock, EiInfo } from '@eplat/ei';
// eslint-disable-next-line no-unused-vars
const router = useRouter();
// eslint-disable-next-line no-unused-vars
const user = useUserStore();
const loading = ref(false);
const finish = ref(false);
// const page = reactive({
//   pageSize: 10,
//   currentPage: 0,
//   result: []
// });
const onLoad = () => {
  loading.value = true;
  if (
    data1.value.length == 0 ||
    data2.value.length == 0 ||
    data3.value.length == 0 ||
    data4.value.length == 0
  ) {
    applyList();
    applyList1();
    applyList2();
    applyList3();
  }
  loading.value = false;
};

/**
 * 登录
 * @returns {Promise<void>}
 */
const applyList = async () => {
  // RCRM0103_HCQF
  const postEiInfo = new EiInfo();
  await api4j
    .RCRM0103_HCQF(postEiInfo)
    .then((res) => {
      data1.value = [];
      if (res.blocks.building.rows.length > 0) {
        data1.value.push(...res.blocks.building.rows);
        // console.log('data1', data1);
      }
      // console.log(res.blocks.building.rows);
      // console.log('resHCQF', res);
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};

const applyList1 = async () => {
  // RCRM0103_JX
  const postEiInfo = new EiInfo();
  await api4j
    .RCRM0103_JX(postEiInfo)
    .then((res) => {
      data2.value = [];
      if (res.blocks.building.rows.length > 0) {
        data2.value.push(...res.blocks.building.rows);
        // console.log('data2', data2);
      }
      // console.log(res.blocks.building.rows);
      // console.log('resJX', res);
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};

const applyList2 = async () => {
  // RCRM0103_JX
  const postEiInfo = new EiInfo();
  await api4j
    .RCRM0103_XH(postEiInfo)
    .then((res) => {
      data3.value = [];
      if (res.blocks.building.rows.length > 0) {
        data3.value.push(...res.blocks.building.rows);
        // console.log('data3', data3);
      }
      // console.log(res.blocks.building.rows);
      // console.log('resXH', res);
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};
const applyList3 = async () => {
  // RCRM0103_XSH
  const postEiInfo = new EiInfo();
  await api4j
    .RCRM0103_XSH(postEiInfo)
    .then((res) => {
      data4.value = [];
      if (res.blocks.building.rows.length > 0) {
        data4.value.push(...res.blocks.building.rows);
        // console.log('data4', data4);
      }
      // console.log(res.blocks.building.rows);
      // console.log('resXSH', res);
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};

const data1 = ref([]);
const data2 = ref([]);
const data3 = ref([]);
const data4 = ref([]);

const goQF = () => {
  router.push('/WX/GZ/WXGZ04');
};
const goXGH = () => {
  router.push('/WX/GZ/WXGZ05');
};
const goXTD = () => {
  router.push('/WX/GZ/WXGZ06');
};
const goCKG = () => {
  router.push('/WX/GZ/WXGZ07');
};
const goYJHY = () => {
  router.push('/WX/GZ/WXGZ08');
};
const goYZWC = () => {
  router.push('/WX/GZ/WXGZ09');
};
</script>
<!--../../../../src/assets/gzbj1.png-->
<template>
  <div>
    <div
      style="
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #4b75e5;
        height: 65px;
        color: white;
        z-index: 1000;
      "
    >
      <div style="font-size: 20px; padding-top: 20px; text-align: center">资产地图</div>
      <!--      <van-button-->
      <!--        to="/WX/GZ/WXGZ01"-->
      <!--        style="-->
      <!--          background-color: #4b75e5;-->
      <!--          color: white;-->
      <!--          display: flex;-->
      <!--          flex-direction: column;-->
      <!--          align-items: center;-->
      <!--          border: 1px solid #4b75e5;-->
      <!--          margin-top: -32px;-->
      <!--          margin-left: 20px;-->
      <!--        "-->
      <!--      >-->
      <!--      </van-button>-->
    </div>
    <div
      style="
        margin-top: 75px;
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
        height: 48px;
        background-color: #94ccff;
        display: flex;
      "
    >
      <div style="display: flex; background-color: #1690ff; width: 11px; align-items: center">
        <!-- 垂直居中的容器 -->
      </div>
      <div style="background-color: #94ccff; display: flex; align-items: center; width: 100%">
        <span style="text-align: center; font-size: 14px; margin-left: 5%"
          >重庆市合川轻纺工业园有限公司</span
        >
        <!--      <van-tag type="warning" size="large" style="margin-left: 15%">轻纺工业园</van-tag>-->
      </div>
    </div>
    <van-list
      v-model:loading="loading"
      class="working-list"
      :finished="finish"
      finished-text=""
      offset="1"
      @load="onLoad"
    >
      <div v-for="(item, index) in data1" style="margin-top: 2%">
        <van-tag type="primary" size="medium" style="margin-left: 6px; width: 29%; height: 30px"
          >总面积: <span style="">{{ item[5] }}(㎡)</span></van-tag
        >
        <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
          >已租赁: <span style="color: #07c160">{{ item[20] }}(㎡)</span></van-tag
        >
        <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
          >已闲置:
          <span style="color: #ee597c; text-align: center">{{ item[21] }}(㎡)</span></van-tag
        >
        <van-tag
          type="primary"
          size="medium"
          style="margin-left: 6px; width: 29%; height: 30px; margin-top: 5px"
          >总套数: <span style="">{{ item[12] }}(套)</span></van-tag
        >
        <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
          >已租赁: <span style="color: #ffeb3b">{{ item[15] }}(套)</span></van-tag
        >
        <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
          >已闲置:
          <span style="color: #ff8d1a; text-align: center">{{ item[7] }}(套)</span></van-tag
        >

        <van-tag
          type="primary"
          size="medium"
          style="margin-left: 6px; width: 29%; height: 30px; margin-top: 5px"
          >已抵押: <span style="color: #ff5733">{{ item[0] }}(套)</span></van-tag
        >
        <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
          >已自用: <span style="color: #07c160">{{ item[3] }}(套)</span></van-tag
        >
        <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
          >已处置:
          <span style="color: darkgray; text-align: center">{{ item[10] }}(套)</span></van-tag
        >
        <div style="margin-top: 10px; margin-left: 10px">
          <van-button style="background-color: #2a82e4; color: white" round @click="goQF()"
            >轻纺工业园</van-button
          >
        </div>
      </div>
      <!--    <div v-if="page.result.length == 0" style="margin-top: 20px; color: gray; text-align: center">-->
      <!--      暂无数据-->
      <!--    </div>-->
    </van-list>
    <!--重庆江厦置业有限公司-->
    <div
      style="
        margin-top: 10px;
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
        height: 48px;
        background-color: #94ccff;
        display: flex;
      "
    >
      <div style="display: flex; background-color: #1690ff; width: 11px; align-items: center">
        <!-- 垂直居中的容器 -->
      </div>
      <div style="background-color: #94ccff; display: flex; align-items: center; width: 100%">
        <span style="text-align: center; font-size: 14px; margin-left: 5%"
          >重庆江厦置业有限公司</span
        >
        <!--      <van-tag type="warning" size="large" style="margin-left: 15%">轻纺工业园</van-tag>-->
      </div>
    </div>
    <!--    <van-list-->
    <!--      v-model:loading="loading"-->
    <!--      class="working-list"-->
    <!--      :finished="finish"-->
    <!--      finished-text=""-->
    <!--      offset="1"-->
    <!--      @load="onLoad"-->
    <!--    >-->
    <div v-for="(item, index) in data2" style="margin-top: 2%">
      <van-tag type="primary" size="medium" style="margin-left: 6px; width: 29%; height: 30px"
        >总面积: <span style="">{{ item[5] }}(㎡)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已租赁: <span style="color: #07c160">{{ item[20] }}(㎡)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已闲置: <span style="color: #ee597c; text-align: center">{{ item[21] }}(㎡)</span></van-tag
      >
      <van-tag
        type="primary"
        size="medium"
        style="margin-left: 6px; width: 29%; height: 30px; margin-top: 5px"
        >总套数: <span style="">{{ item[12] }}(套)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已租赁: <span style="color: #ffeb3b">{{ item[15] }}(套)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已闲置: <span style="color: #ff8d1a; text-align: center">{{ item[7] }}(套)</span></van-tag
      >

      <van-tag
        type="primary"
        size="medium"
        style="margin-left: 6px; width: 29%; height: 30px; margin-top: 5px"
        >已抵押: <span style="color: #ff5733">{{ item[0] }}(套)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已自用: <span style="color: #07c160">{{ item[3] }}(套)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已处置:
        <span style="color: darkgray; text-align: center">{{ item[10] }}(套)</span></van-tag
      >
      <div style="margin-top: 10px; margin-left: 10px">
        <van-button style="background-color: #2a82e4; color: white" round @click="goCKG()"
          >创客港</van-button
        >
        <van-button style="background-color: #2a82e4; color: white" round @click="goYJHY()"
          >映江花园</van-button
        >
        <van-button style="background-color: #2a82e4; color: white" round @click="goYZWC()"
          >印制五厂</van-button
        >
      </div>
    </div>
    <!--    <div v-if="page.result.length == 0" style="margin-top: 20px; color: gray; text-align: center">-->
    <!--      暂无数据-->
    <!--    </div>-->
    <!--    </van-list>-->
    <!--重庆江厦徐汇置业有限公司-->
    <div
      style="
        margin-top: 10px;
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
        height: 48px;
        background-color: #94ccff;
        display: flex;
      "
    >
      <div style="display: flex; background-color: #1690ff; width: 11px; align-items: center">
        <!-- 垂直居中的容器 -->
      </div>
      <div style="background-color: #94ccff; display: flex; align-items: center; width: 100%">
        <span style="text-align: center; font-size: 14px; margin-left: 5%"
          >重庆江厦徐汇置业有限公司</span
        >
        <!--      <van-tag type="warning" size="large" style="margin-left: 15%">轻纺工业园</van-tag>-->
      </div>
    </div>
    <!--  <van-list-->
    <!--    v-model:loading="loading"-->
    <!--    class="working-list"-->
    <!--    :finished="finish"-->
    <!--    finished-text=""-->
    <!--    offset="1"-->
    <!--    @load="onLoad2"-->
    <!--  >-->
    <div v-for="(item, index) in data3" style="margin-top: 2%">
      <van-tag type="primary" size="medium" style="margin-left: 6px; width: 29%; height: 30px"
        >总面积: <span style="">{{ item[5] }}(㎡)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 30%; height: 30px"
        >已租赁: <span style="color: #07c160">{{ item[20] }}(㎡)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 28%; height: 30px"
        >已闲置: <span style="color: #ee597c; text-align: center">{{ item[21] }}(㎡)</span></van-tag
      >
      <van-tag
        type="primary"
        size="medium"
        style="margin-left: 6px; width: 29%; height: 30px; margin-top: 5px"
        >总套数: <span style="">{{ item[12] }}(套)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已租赁: <span style="color: #ffeb3b">{{ item[15] }}(套)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已闲置: <span style="color: #ff8d1a; text-align: center">{{ item[7] }}(套)</span></van-tag
      >

      <van-tag
        type="primary"
        size="medium"
        style="margin-left: 6px; width: 29%; height: 30px; margin-top: 5px"
        >已抵押: <span style="color: #ff5733">{{ item[0] }}(套)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已自用: <span style="color: #07c160">{{ item[3] }}(套)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已处置:
        <span style="color: darkgray; text-align: center">{{ item[10] }}(套)</span></van-tag
      >
      <div style="margin-top: 10px; margin-left: 10px">
        <van-button style="background-color: #2a82e4; color: white" round @click="goXGH()"
          >星光汇</van-button
        >
      </div>
    </div>
    <!--    <div v-if="page.result.length == 0" style="margin-top: 20px; color: gray; text-align: center">-->
    <!--      暂无数据-->
    <!--    </div>-->
    <!--  </van-list>-->
    <!--重庆新沙纺房屋租赁有限公司-->
    <div
      style="
        margin-top: 10px;
        width: 96%;
        margin-left: 2%;
        margin-right: 2%;
        height: 48px;
        background-color: #94ccff;
        display: flex;
      "
    >
      <div style="display: flex; background-color: #1690ff; width: 11px; align-items: center">
        <!-- 垂直居中的容器 -->
      </div>
      <div style="background-color: #94ccff; display: flex; align-items: center; width: 100%">
        <span style="text-align: center; font-size: 14px; margin-left: 5%"
          >重庆新沙纺房屋租赁有限公司</span
        >
        <!--      <van-tag type="warning" size="large" style="margin-left: 15%">轻纺工业园</van-tag>-->
      </div>
    </div>
    <!--  <van-list-->
    <!--    v-model:loading="loading"-->
    <!--    class="working-list"-->
    <!--    :finished="finish"-->
    <!--    finished-text=""-->
    <!--    offset="1"-->
    <!--    @load="onLoad3"-->
    <!--  >-->
    <div v-for="(item, index) in data4" style="margin-top: 2%">
      <van-tag type="primary" size="medium" style="margin-left: 6px; width: 29%; height: 30px"
        >总面积: <span style="">{{ item[5] }}(㎡)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已租赁: <span style="color: #07c160">{{ item[20] }}(㎡)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已闲置: <span style="color: #ee597c; text-align: center">{{ item[21] }}(㎡)</span></van-tag
      >
      <van-tag
        type="primary"
        size="medium"
        style="margin-left: 6px; width: 29%; height: 30px; margin-top: 5px"
        >总套数: <span style="">{{ item[12] }}(套)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已租赁: <span style="color: #ffeb3b">{{ item[15] }}(套)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已闲置: <span style="color: #ff8d1a; text-align: center">{{ item[7] }}(套)</span></van-tag
      >

      <van-tag
        type="primary"
        size="medium"
        style="margin-left: 6px; width: 29%; height: 30px; margin-top: 5px"
        >已抵押: <span style="color: #ff5733">{{ item[0] }}(套)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已自用: <span style="color: #07c160">{{ item[3] }}(套)</span></van-tag
      >
      <van-tag type="primary" size="medium" style="margin-left: 2px; width: 29%; height: 30px"
        >已处置:
        <span style="color: darkgray; text-align: center">{{ item[10] }}(套)</span></van-tag
      >
      <div style="margin-top: 10px; margin-left: 10px">
        <van-button style="background-color: #2a82e4; color: white" round @click="goXTD()"
          >升伟新天地</van-button
        >
      </div>
      <div style="margin-top: 10px; margin-left: 34%"></div>
    </div>
    <!--    <div v-if="page.result.length == 0" style="margin-top: 20px; color: gray; text-align: center">-->
    <!--      暂无数据-->
    <!--    </div>-->
    <!--  </van-list>-->
  </div>
</template>

<style lang="stylus" scoped>
.page-main

  .working-list
    .item1
      padding-top 0px
      padding-bottom 0px
    .title1
      color #003586
      font-weight bolder
      font-size 13px
    .titles
      color #161718
      font-weight bolder
      font-size 13px
    .titless
      color #161718
      font-weight bolder
      font-size 17px
    .title2
      color #808080
      font-size 13px
    padding 4px
    margin-bottom 48px
    .van-tag
      margin-left 5px
      font-size 12px
      padding 5px
    .btn1
      background-color #038008
      border-radius 5px
      margin-left 5px
    .btn0
      background-color #ff8d1a
      border-radius 5px
      margin-left 5px
    .class1
      background-color #99bcf1
      border-radius 5px
    .class2
      background-color #f19999
      border-radius 5px
    .class3
      background-color #99a6f1
      border-radius 5px
    .card-item
      margin 8px
      background-color white

      .item-value
        display flex
        justify-content space-between
        overflow hidden
        text-overflow ellipsis
        word-break keep-all
        white-space nowrap
        background-color transparent
        .group1
          display flex
          flex-direction row
          justify-content space-between

  .bottom-buttons
    position fixed
    bottom 12px
    left auto
    width 100%
    max-width var(--max-width)
</style>
